<template>
    <div class="top-category">
        <secondary-category v-for="secondaryCategory in children"
                            :key="secondaryCategory.id" :category="secondaryCategory"/>
    </div>
</template>

<script>
  import { catalog } from "@mall/api-services"
  import * as _ from "lodash"
  import SecondaryCategory from "@/views/categories/SecondaryCategory"

  export default {
    name: "TopCategory",
    components: { SecondaryCategory },
    props: {
      category: catalog.Category,
    },
    data() {
      return {
        children: [],
      }
    },
    watch: {
      category(category) {
        this.refreshChildren(category)
      },
    },
    methods: {
      refreshChildren(category) {
        const { id } = category
        if (_.isUndefined(id)) {
          return
        }
        catalog.CategoryServiceV1
          .getCategories()
          .parentId(id)
          .level(1)
          .list()
          .then(categories => this.children = categories)
      },
    },
  }
</script>

<style lang="scss" scoped>

    .top-category {

    }
</style>
